<template>
  <div>
    <div class="playl-tag-name">{{ data.name }}</div>
    <div class="tag-normal" v-MoreTagClick>
      <div class="tag-list">
        <ul>
          <template v-for="(item, index) of data.subs.slice(0, 7)" :key="index">
            <li>
              <a
                :class="TagCategory.cat === item.name ? 'active' : ''"
                :href="
                  '#cat=' + item.name + '&liid=' + liId + '&itemid=' + item.id
                "
                :data-cat="item.name"
                @click="TagClick(item)"
                >{{ item.name }}</a
              >
            </li>
          </template>
          <li v-if="data.subs.length > 7">
            <a
              :class="
                liId === TagCategory.liid && TagCategory.isPop
                  ? 'showMoreTag active'
                  : 'showMoreTag'
              "
              href="javascript:void(0);"
            >
              <span>{{
                (liId === TagCategory.liid &&
                  TagCategory.isPop &&
                  TagCategory.cat) ||
                "更多"
              }}</span>
            </a>
          </li>
        </ul>
      </div>
      <div class="container">
        <div class="pop-tag-mian">
          <ul class="clearfix" data-tag-more="tagMore">
            <template
              v-for="(item, index) of data.subs.slice(7, data.subs.length)"
              :key="index"
            >
              <li>
                <a
                  :class="TagCategory.cat === item.name ? 'active' : ''"
                  :href="
                    '#cat=' +
                    item.name +
                    '&liid=' +
                    liId +
                    '&isPop=true' +
                    '&itemid=' +
                    item.id
                  "
                  :data-cat="item.name"
                  @click="TagClick(item, 'isPop')"
                  >{{ item.name }}</a
                >
              </li>
            </template>
          </ul>
        </div>
      </div>
    </div>

    <div class="tag-1024" v-MoreTagClick>
      <div class="tag-list">
        <ul>
          <template v-for="(item, index) of data.subs.slice(0, 4)" :key="index">
            <li>
              <a
                :class="TagCategory.cat === item.name ? 'active' : ''"
                :href="
                  '#cat=' + item.name + '&liid=' + liId + '&itemid=' + item.id
                "
                :data-cat="item.name"
                @click="TagClick(item)"
                >{{ item.name }}</a
              >
            </li>
          </template>
          <li>
            <a
              :class="
                liId === TagCategory.liid && TagCategory.isPop
                  ? 'showMoreTag active'
                  : 'showMoreTag'
              "
              href="javascript:void(0);"
            >
              <span>{{
                (liId === TagCategory.liid &&
                  TagCategory.isPop &&
                  TagCategory.cat) ||
                "更多"
              }}</span>
            </a>
          </li>
        </ul>
      </div>
      <div class="container">
        <div class="pop-tag-mian">
          <ul class="clearfix" data-tag-more="tagMore">
            <template
              v-for="(item, index) of data.subs.slice(7, data.subs.length)"
              :key="index"
            >
              <li>
                <a
                  :class="TagCategory.cat === item.name ? 'active' : ''"
                  :href="
                    '#cat=' +
                    item.name +
                    '&liid=' +
                    liId +
                    '&isPop=true' +
                    '&itemid=' +
                    item.id
                  "
                  :data-cat="item.name"
                  @click="TagClick(item, 'isPop')"
                  >{{ item.name }}</a
                >
              </li>
            </template>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MoreTagClick from "./directives/MoreTagClick";
import { reactive, toRefs } from "vue";
export default {
  name: "TagItem",
  directives: {
    MoreTagClick, //自定义指令
  },
  props: {
    data: Object,
    liId: Number,
    TagCategory: Object,
  },
  emits: ["tagClick"],
  setup(props, { emit }) {
    const state = reactive({
      curMore: {
        id: 0,
        name: "",
      },
    });

    // Tag点击事件
    const TagClick = (item, isPop = "") => {
      emit("tagClick", {
        cat: item.name,
        liid: props.liId,
        isPop: isPop,
        itemid: item.id,
      });
    };
    return {
      ...toRefs(state),
      TagClick,
    };
  },
};
</script>

<style lang='scss' scoped>
.playl-tag-name {
  position: static;
  width: 100%;
  color: #999;
  font-size: 14px;
  text-align: center;
}
.tag-1024 {
  display: none;
}
.tag-list {
  margin-top: -8px;
  min-height: 120px;
  text-align: center;
  ul {
    li {
      width: 72px;
      display: inline-block;
      margin-top: 18px;
      .showMoreTag {
        span {
          display: inline-block;
          max-width: 40px;
          vertical-align: middle;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
  }
}
.container {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  margin-top: 10px;
  &.active {
    display: block;
    z-index: 2;
  }
  .pop-tag-mian {
    position: absolute;
    width: 95%;
    z-index: 1;
    top: 0;
    left: 2.5%;
    ul {
      background-color: #fff;
      box-sizing: border-box;
      padding: 30px 0 0 40px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      li {
        float: left;
        margin: 0 40px 25px 0;
      }
    }
  }
}

a {
  padding: 3px 8px 4px;
  border-radius: 13px;
  &.active {
    background-color: #e91e63;
    color: #fff;

    &:hover {
      color: #fff;
    }
  }
  &:hover {
    color: $ThemeColor;
  }
}
@media screen and (max-width: 999px),
  (min-width: 1000px) and (max-width: 1199px) {
  .tag-normal {
    display: none;
  }
  .tag-1024 {
    display: block;
  }
}
</style>
